<template>
  <dialog-View class="update_price_dialog_view" :isShow="_isOpen" :title="'修改订单价格'" :width="1200">
    <template #header>
      <div style="display: flex; align-items: center">
        <p class="f18 mr20">修改订单价格</p>
        <el-button type="primary" @click="openSelectProd">添加商品</el-button>
      </div>
    </template>
    <div class="product_information">
      <el-empty v-if="priceDetail.orderDetailList?.length === 0" description="暂无商品信息, 您可以添加商品到当前订单合同中" />
      <!-- 计算涨价降价总和价格 -->
      <el-table :data="priceDetail.orderDetailList" border class="jzt-table" stripe>
        <el-table-column label="商品信息" width="360">
          <template #default="scope">
            <div class="sp_meassage">
              <img class="image" :src="scope.row.mainPicUrl" alt="" />
              <div class="info">
                <div>{{ scope.row.productAliasName }}</div>
                <div>sku编码:{{ scope.row.skuCode }}</div>
                <div>ID:{{ scope.row.productId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="商品价格"></el-table-column>
        <el-table-column prop="commodityNum" label="数量" width="120">
          <template #default="scope">
            <el-input
              v-if="scope.row.isLock !== 1 && scope.row.dealState == 1"
              v-model="scope.row.commodityNum"
              style="width: 60%"
              @change="updatePrice(scope.row.salePrice, scope.row)"
            />
            <span v-else>{{ scope.row.commodityNum }}</span>
            套
          </template>
        </el-table-column>
        <el-table-column prop="partNum" label="商品清单件数单位"></el-table-column>
        <el-table-column prop="actualPrice" label="实付价格"></el-table-column>
        <el-table-column prop="" label="涨价/减价(-为降价+为涨价)" width="200">
          <template #default="scope">
            <el-input
              v-if="scope.row.isLock !== 1 && scope.row.dealState == 1 && !(scope.row.isCustom === 1)"
              v-model="scope.row.salePrice"
              :placeholder="scope.row.salePrice"
              type="number"
              class="input-with-select"
              @change="handelInputSalePrice(scope.row)"
            >
              <template #prepend>
                {{ scope.row.salePrice < 0 ? "降价" : "涨价" }}
              </template>
            </el-input>
            <span v-else>
              {{ scope.row.salePrice < 0 ? "降价" : "涨价" }}
              {{ scope.row.salePrice }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-popconfirm title="确定删除?" @confirm="handelClickDelet(scope.row)">
              <template #reference>
                <el-button v-if="scope.row.isLock !== 1 && scope.row.dealState == 1" type="primary" link size="small"
                  >删除商品</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="total_price">
        <div class="total_price-left">
          <div>
            <span>优惠金额:</span>
            <el-input-number
              v-model="priceDetail.salePrice"
              :controls="false"
              :min="0"
              style="width: 150px"
              @change="updatePrice"
            />
          </div>
          <div>
            <span>其他费用:</span>
            <el-input-number
              v-model="priceDetail.otherPrice"
              :controls="false"
              :min="0"
              style="width: 150px"
              @change="updatePrice"
            />
          </div>
        </div>
        <div class="total_price-right">
          <p class="pt10 mr16">
            合计金额:<span>￥{{ priceDetail.actualPrice }}</span>
          </p>

          <el-button @click="_isOpen = false">取消</el-button>
          <el-button type="primary" @click="handelSubmit">保存修改</el-button>
        </div>
      </div>

      <!-- 材料-选择商品 -->
      <SelectProduct :optionInfo="prodOptionInfo" @close="closeSelectProd" @submit="selectProduct()" />
    </div>
  </dialog-View>
</template>
<script setup>
import dialogView from "../../components/dialogView.vue";
import { deleteOrderSku, getOrderDetail, updateOrderPrice } from "@/apis/order";
import { computed, ref } from "vue";
import SelectProduct from "./selectProduct.vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  orderDetail: { type: Object, default: () => ({}) }
});

const emit = defineEmits(["update:modelValue", "success"]);

const _isOpen = computed({
  get: () => props.modelValue,
  set: newVal => emit("update:modelValue", newVal)
});

const priceDetail = ref({});
const prodOptionInfo = ref({});

const openSelectProd = () => {
  prodOptionInfo.value = {
    isShow: true,
    orderObj: props.orderDetail,
    detailList: priceDetail.value.orderDetailList
  };
};

const closeSelectProd = () => {
  prodOptionInfo.value.isShow = false;
};

const selectProduct = () => {
  prodOptionInfo.value.isShow = false;
  getOrderDetailFn();
};

const getOrderDetailFn = async () => {
  const { data } = await getOrderDetail(props.orderDetail.orderId);
  priceDetail.value = data;
  priceDetail.value.cache = JSON.parse(JSON.stringify(data.orderDetailList));
};

const handelInputSalePrice = async item => {
  priceDetail.value.cache.map(it => {
    if (it.businessSkuId === item.businessSkuId) {
      priceDetail.value.cache = it.actualPrice;
    }
  });
  item.actualPrice = (Number(item.unitPrice) + Number(item.salePrice)) * Number(item.commodityNum);

  await updatePrice(); //刷新修改价格弹窗详情list
  getOrderDetailFn();
};

const handelClickDelet = async item => {
  if (item.isLock == 1) {
    ElMessage({ type: "warning", message: "不能删除" });
  } else {
    await deleteOrderSku({ orderDetailId: item.orderDetailId });
    ElMessage({ type: "warning", message: "删除成功" });
    getOrderDetailFn();
  }
};

const updatePrice = async () => {
  await updateOrderPrice(priceDetail.value);
};

const handelSubmit = async () => {
  _isOpen.value = false;
  emit("success", "修改价格成功");
};

(() => {
  getOrderDetailFn();
})();
</script>
<style scoped lang="scss">
@import "../index.scss";
</style>
<style lang="scss">
.update_price_dialog_view {
  .el-input__wrapper {
    background: white !important;
  }
  .el-input-group__prepend {
    background: white !important;
  }
}
</style>
